<!--租客签约账单预览对话框-->
<template>
	<a-modal v-bind="option" :footer="null">
		<p class="">房源地址:{{ props.data?.houseAddress }}</p>
		<div class="bill-table-wrapper">
			<a-skeleton :loading="loadings.calc" active :paragraph="{rows: 13}">
				<template v-for="item in list" :key="item.num">
					<a-typography-paragraph strong>
						<blockquote>{{ item.name }}</blockquote>
					</a-typography-paragraph>
					<vxe-table :data="item.bills" v-bind="billTableOption" class="bill-preview-table">
						<!--结转抵扣不显示复选框-->
						<vxe-column type="expand" title="期数" width="100">
							<template #default="{row}">第{{ row.num }}期</template>
							<template #content="{row}">
								<vxe-table :data="row.finances" :show-header="false">
									<vxe-column width="65">
										<template #default="{row: detail}">
											<svg-icon :icon-class="`finance-${detail.feeDirection == 1 ? 'in' : 'out'}`" />
											<span v-if="detail.feeDirection === 1" v-color="{color: 'primary'}">&nbsp;收</span>
											<span v-else v-color="{color: 'danger'}">&nbsp;付</span>
										</template>
									</vxe-column>
									<vxe-column min-width="200">
										<template #default="{row: detail}">
											{{ detail.feeSubjectName }}:
											<span v-color="{color: 'primary'}">{{ detail.amount.toLocaleString() }}</span>
											元
											<!--billType=2定金账单，不显示抵扣信息-->
											<template v-if="row.billType !== 2 && detail.occurredMoney > 0 && detail.feeDirection === 1">
												<a-tag color="processing" class="bill-carry-forward-tips">
													结转抵扣
													{{ detail.occurredMoney.toLocaleString() }}
													元， 抵扣后待收 {{ detail.notOccurredMoney.toLocaleString() }} 元
												</a-tag>
											</template>
										</template>
									</vxe-column>
									<vxe-column width="180">
										<template #default="{row}">付款日期:{{ row.payDate }}</template>
									</vxe-column>
									<vxe-column width="280">
										<template #default="{row}">费用周期:{{ row.beginDate }}至{{ row.endDate }}</template>
									</vxe-column>
								</vxe-table>
							</template>
						</vxe-column>
						<vxe-column field="billDate" title="账单日期" min-width="120" align="center" />
						<vxe-column title="账单周期" min-width="260" align="center">
							<template #default="{row}">{{ row.beginDate }}至{{ row.endDate }}</template>
						</vxe-column>
						<vxe-column field="totalAmount" title="金额" min-width="100" align="right">
							<template #default="{row}">{{ row.totalAmount.toLocaleString() }}</template>
						</vxe-column>
						<vxe-column title="操作" width="100" align="center">
							<template #default="{row}">
								<a>明细</a>
							</template>
						</vxe-column>
					</vxe-table>
				</template>
			</a-skeleton>
		</div>
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, reactive, ref, toRaw, toRef, watch} from 'vue'
	import {VxeTableProps} from 'vxe-table'
	import {message} from 'ant-design-vue'
	import XEUtils from 'xe-utils'
	import {getDetails} from '@/api/charter-contract'

	const props = defineProps<{
		visible: boolean
		data: any
	}>()

	const loadings = reactive({
		calc: false,
		save: false
	})

	const emits = defineEmits(['update:visible', 'success'])
	const option = reactive({
		width: 1100,
		title: '抵扣详情',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
		}
	})

	// 账单列表
	const list = ref<any[]>([])

	const options = reactive({
		payMethods: []
	})

	const billTableOption = reactive<VxeTableProps>({
		size: 'medium',
		rowConfig: {
			isHover: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		},
		checkboxConfig: {
			checkField: 'isDealWith',
			checkMethod({row}) {
				// 房源定金禁用复选框
				return row.billType !== 2
			}
		}
	})

	watch(
		() => props.visible,
		newVal => {
			if (newVal) {
				getDetails({contractId: props.data?.contractId, deductionAmount: Math.abs(props.data?.deductionAmount)}).then((res: any) => {
					list.value = res.data
				})
			}
		}
	)
</script>

<style lang="less">
	.renter-bill-preview-dialog {
		.ant-modal-body {
			padding: 0;
			overflow: auto;
			height: 550px;
			position: relative;

			.vxe-toolbar {
				height: 50px;
				border-bottom: 1px solid @border-color-light;
			}

			.bill-table-wrapper {
				padding: 12px;

				.ant-typography:first-of-type blockquote {
					margin-top: 0;
				}

				.bill-preview-table {
					.vxe-body--expanded-column {
						border: none;

						.vxe-table--body-wrapper {
							margin-top: -1px;
							background: rgba(@primary-color, 0.05);

							.vxe-body--column {
								vertical-align: baseline;
							}
						}

						.svg-icon {
							width: 24px;
						}

						.bill-carry-forward-tips {
							left: 4px;
							position: relative;

							&:before {
								content: '';
								width: 8px;
								height: 8px;
								top: 6px;
								left: -4px;
								display: inline-block;
								position: absolute;
								transform: rotate(45deg);
								border: 1px solid transparent;
								background-color: inherit;
								border-left-color: inherit;
								border-bottom-color: inherit;
								border-radius: @border-radius-base;
							}
						}
					}
				}
			}
		}
	}
</style>
